<template>
	<div class="app-container">
		<div class="bgWhite radius8 pt25">
			<div class="pl30 fb fs16 border-bottom pb25">
				秘籍宝典
			</div>
			<div class="p30">
				<div class="inputCask flex col-center row-between pl20">
					<img width="24" src="@/assets/images/Search.png" alt="" />
					<el-input v-model="queryParams.title" placeholder="请输入名称或其他关键字搜索..." clearable class="elInput"
						size="large" />
					<el-button class="btnSearch" type="defaultBtn" @click="handleQuery">搜索</el-button>
				</div>
				<div class="mt30" v-if="list.length > 0">
					<div class="flex col-center row-between">
						<span class="color2">为您找到相关结果约{{total}}个，搜索用时（{{seconds}}秒）</span>
						<div class="fs14">
							<span class="mr10 cursor"
							@click="rankList()"
							:class="{'main-color':active == ''}"
							>默认排序</span>
							<span class="cursor"
							@click="rankList(1)"
							:class="{'main-color':active == 1}"
							>按时间排序</span>
						</div>
					</div>
					<div class="pt30">
						<div class="flex col-center row-between border-bottom pb20 mt20 cursor" 
						v-for="(item,index) in list" :key="index"
							@click="handelDetail(item)">
							<div>
								<div class="fs16 fb">{{item.title}}</div>
								<div class="fs14 color2 mt15 text-line-1">{{item.description}}</div>
							</div>
							<div class="fs14 text-right">
								<div class="color2">{{item.createTime}}</div>
								<div class="main-color mt15">浏览 {{item.viewCount || 0}}</div>
							</div>
						</div>
						<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
							v-model:limit="queryParams.pageSize" @pagination="getList" />
					</div>
				</div>
				<div class="text-center" style="padding-bottom: 120px;" v-else>
					<img width="270" src="@/assets/images/screct.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		cheatsList
	} from '@/api/business/screct.js'
	import {
		Search
	} from '@element-plus/icons-vue'
	export default {
		data() {
			return {
				active:'',
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					title: '',
					sortKey:''
				},
				list: [],
				seconds:0,//搜索用时
			}
		},
		created() {
			this.queryParams.title = this.$route.query.keyword ? this.$route.query.keyword : ''
			this.getList()
		},
		methods: {
			// 搜索
			handleQuery() {
				this.queryParams.pageNum = 1
				this.getList()
			},
			getList(num) {
				// 请求开始时间
			    const startTime = performance.now();
				cheatsList(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
					if(!num){
						const endTime = performance.now();
						this.seconds = ((endTime - startTime) / 1000).toFixed(2);
					}
				})
			},
			//排序
			rankList(num){
				this.active = num
				this.queryParams.sortKey = num
				this.getList(1)
			},
			//跳转详情
			handelDetail(item){
				this.$router.push('/sort/sortDetail/'+item.id)
			}
		}
	}
</script>

<style lang="scss">
	.inputCask {
		width: 928px;
		height: 56px;
		border-radius: 12px;
		background: rgba(250, 250, 250, 1);
		margin: 0 auto;

		.elInput {
			height: 56px;
		}

		.btnSearch {
			width: 96px;
			height: 56px;
			border-radius: 12px;
		}

	}

	/* 去掉Element UI Input组件的边框 */
	.el-input--large .el-input__wrapper {
		border: none !important;
		box-shadow: none !important;
		background: rgba(250, 250, 250, 1);
	}

	.treasureItem {
		border: 1px solid #DCDFE6;
		width: 244px;
		height: 224px;
	}

	.loadMore {
		padding: 0 10px;
		height: 32px;
		border-radius: 4px;
		border: 1px solid #D9D9D9;
		display: inline-block;
		text-align: center;
		line-height: 32px;
		font-size: 14px;
	}
</style>